書体を知る、調べる、観察する、比べる、触る、実装する。書体選びを1ページで行うウェブアプリを無料公開しました。
書体にまつわるキュレーションウェブアプリケーション「G®yph.（グリフ）」を制作し、公開しました。ブラウザだけで動き、インストールもアカウント登録も要らず、無料でお使いいただけます。
扱えるのは、Google Fontsの1,813書体（うち和文68書体）に加えて、パソコンに入っている書体と、画面にドロップしたフォントファイル（.otf／.ttf／.woff／.woff2）です。出どころの違う書体を、同じ画面・同じ操作で並べて比べられます。
自分で打った言葉を大きく表示し、書体名にカーソルを乗せると、文字は次の書体へ形を変えます。「並べ見る」で書体を一覧にし、「Info」で書体の来歴や文字展開を調べ、「Effects」ではフォントファイルから読み出した輪郭をつまんで伸ばしたり、17種類の変形とエフェクトで崩したりできます。Google Fontsの書体は「+Web <>」から、そのままWebに実装するためのコードを取り出せます。
企画・UI設計・フロントエンドの実装までを私が一人で行いました。ここからは、G®yph.の実装の技術的なポイントを紹介します。
WebGL2のシェーダーで、前の字形と次の字形をつなぐ。
書体が替わる瞬間のトランジションは、WebGL2で描いています。前の書体と次の書体の文字を、画面と同じ位置・大きさで2Dのcanvasに描き、グレースケール（1チャンネル）のテクスチャに写してから、GLSLのシェーダーで1コマずつ合成します。
動きは9種類で、長さは400〜760msです。線の太さやセリフ、カーブがその場で変わる「かたちがわり」などは、輪郭からの距離をJump Flooding（距離場を高速に求める手法）で求め、前後の字形の距離を混ぜて途中の形を作ります。ぼかした文字どうしを溶け合わせる「ぽよん」、ミップマップを使ってピントが合っていくように見せる「ぴんと」など、動きごとに前処理を変えています。
ウェイトの切り替えは、線の太さが変わって見えるように、いつも「かたちがわり」でつなぎます。続けて書体を替えたときは、いま見えている形から、そのまま次へつなぎます。OSの「視差効果を減らす」がオンのときや、WebGL2が使えないときは、トランジションを省いてそのまま切り替えます。
fontkitでフォントファイルを読み、本物の輪郭をSVGのパスとして扱う。
「Effects」では、フォントファイルをfontkitで開き、画面に表示している文字を、同じ位置・大きさのSVGのパスに置き換えます。見た目を似せた図形ではなく、フォントファイルに入っている輪郭そのものを変形します。
輪郭をつまんで引く変形（のばす・ねじる・ふくらます・しぼめる・まるめる）は、つまんだ所ほど強く、離れるほど弱く効くように、重みを (1 − r²/R²)³ で計算しています。やり直しは60回までで、変形した輪郭はSVG・PNGで書き出せます。
パソコンに入っている書体の読み込みには、Local Font Access API（Chrome／Edge）を使っています。このAPIはHTTPS（セキュアコンテキスト）でしか使えないため、G®yph.はHTTPSで配信しています。読み込んだフォントファイルはブラウザの中だけで扱い、どこにも送信も保存もしません。
企画、UI設計、フロントエンド実装までを一貫して行うことで、操作の細部まで統一感のあるWebアプリケーションを制作します。
G®yph.は、UIを最小限にし、主役である文字だけが画面に残るように設計しています。画面の設計も、それを支えるシェーダーやフォントの処理も私自身が書いているため、トランジションの長さや反応の細部まで、設計の意図どおりに作り込めます。
こうしたWebアプリケーションの企画・設計・実装は、お仕事としても承っています。詳しくはWEBアプリケーションのページをご覧ください。G®yph.のほかの自作ツールはPRODUCTにまとめています。
G®yph. の詳細とアプリのご利用はこちら。
Typeface Hyper-Curation Web App. 書体にまつわるキュレーションウェブアプリ「Gryph - グリフ」 Designed and Developed by HIGASHIYUKI®